<template>
  <div class="class_new_view">
      <div class="class_new_header">
          <el-tag type="info">
          添加班级，请填写选项，请注意，创建成功后会回显班级URL
          </el-tag>

      </div>

      <div class="class_form_div">
          <el-form ref="form" :model="classInfo" label-width="130px">

                <el-form-item label="专业名称：" class="item-width">
                    <el-input v-model="classInfo.className"></el-input>
                </el-form-item>


                <el-form-item label="所属年级：" style="width:200px">
                    <el-input v-model="classInfo.classSession" @change="changeT" type="number" ></el-input>
                </el-form-item>

                <el-form-item label="批量添加班级：" class="item-width">
                    <el-tag
                        :key="tag"
                        v-for="tag in classInfo.classNumber"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{tag}}
                        </el-tag>
                        <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" 
                        size="small" @click="showInput">+ New 班级, 格式: 01班</el-button>

                        <!-- <el-button
                        size="small">确定并查询(请遵循格式，否则无法查询到学生)</el-button> -->
                </el-form-item>

                <el-form-item label="所属学院：" class="item-width">
                    <el-input v-model="classInfo.college"></el-input>
                </el-form-item>

                <el-form-item label="限制人数：" style="width:200px">
                    <el-input v-model="classInfo.stuNumber" type="number" :min='1'></el-input>
                </el-form-item>

                <!-- <el-form-item label="创建班级的名字：">
                        <el-date-picker
                        v-model="classInfo.endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        :picker-options="pickerOptions">
                        </el-date-picker>
                </el-form-item> -->

                <!-- <el-form-item label="选择部分学生：">
                    <el-tag type="info">
                        如若您第一次进行创建班级，学生数据可能并没有录入系统。请让学生使用班级URL进行绑定
                    </el-tag>
                    <br>
                    <el-tag type="info">
                        如若使用批量创建班级，可进行全选学生，服务端会自动进行学生和班级筛选和匹配。
                    </el-tag>
                    <el-transfer v-model="classInfo.checkData" 
                    :data="stuData" class="transfer-item" 
                    :titles="['可选学生', '已选学生']"></el-transfer>
                </el-form-item> -->

                <el-form-item label="创建班级的名字：">
                    <el-tag type="warning" v-for="className, index in  classInfo.classNumber" :key="index">
                        {{classInfo.className + classInfo.classSession + className}}
                    </el-tag>
                    
                </el-form-item>

                <el-form-item >
                    <el-button type="primary" @click="classCreare">开始创建</el-button>
                </el-form-item>
                
          </el-form>

          <div class="calss_finish_create" v-loading="classUrlLoading"  v-if="classUrlShow">
              
            <el-tag type="info">
                如学生数据未录入，又或您需要添加学生，请发送给学生以下的 班级链接，让学生进行绑定。
            </el-tag>
            <br><br>
            <div v-for="urlInfo, index in urlInfos" :key="index" style="margin-top:1%;" >
                <el-tag type="info">
                {{urlInfo.className}}->班级链接：
                </el-tag>
                <el-tag type="info">
                    {{host}}/api/classes/bind/{{urlInfo.classUrl}}
                </el-tag>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import  {createClass} from "../../api/class/index"

export default {
  components: {  },
    data() {
        return {
            host:'',
            classInfo: {
                className: "3G软件",
                classSession: "",
                // checkData:[],
                college:'计算机与通信工程学院',
                classNumber:['01班'],
                stuNumber:50,
            },
            dynamicTags: ['01班'],
            stuData: [
                {
                    key :3006,
                    label: "胡一涵"
                },
                {
                    key :2,
                    label: "jxd"
                },
            ],
            inputVisible: false,
            inputValue: '',
            classUrlShow: false,
            classUrl: "http:127.0.0.1:8080/api/class/add/WiFkis",
            classUrlLoading:false,
            urlInfos:[
                {
                    className:'3G软件1702班',
                    classUrl: "93524822197549dba5ce8316b676732a"
                }
            ]
            
        }
    },
    methods: {
        getRecentYears() {
            let cur_time = new Date();
            let cur_year = Number(cur_time.getFullYear()
                            .toString().substring(2,4))
            this.classInfo.classSession = cur_year
        },
        changeT() {
            console.log(this.classInfo.classSession)
        },
        handleClose(tag) {
            this.classInfo.classNumber.splice(this.classInfo.classNumber.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
            this.classInfo.classNumber.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        classInfofinish() {
            this.isShow = true
        },
        classCreare() {
            this.classUrlShow = true
            this.classUrlLoading = true
            createClass(this.classInfo).then(res => {
                if(res.code == 200) {
                    this.urlInfos = res.data.urls
                    console.log(this.urlInfos)
                    //添加成功
                    this.$message({
                        message: '创建成功，请查看班级URL信息',
                        type: 'success'
                    });
                    this.classUrlLoading = false
                    
                }else{
                this.$message({
                    showClose: true,
                    message: res.data.error,
                    type: 'error'
                });
                }
            }).catch(err => {
                this.$message({
                    showClose: true,
                    message: '网络可能有点问题！' + err,
                    type: 'error'
                });
            })
            

        },
    },
    mounted() {
        this.getRecentYears()
        let host = window.location.host;
        this.host = host
    }
}
</script>

<style>

.class_new_view {
    margin:2%;
}

.class_new_header {
    margin-left: 45px;
}

.class_form_div {
    margin-top: 2%;
}

.item-width {
    width: 430px;
}

.input-new-tag {
    margin-left: 20px;
    margin-right: 20px;
    width: 90px;
    height: 32px;
    line-height: 28px;
    vertical-align: bottom;
}

.button-new-tag {
    margin-left: 3px;
}

.el-tag + .el-tag {
    margin-left: 10px;
}

.transfer-item {
    margin-top: 10px;
    margin-bottom: 20px;
}

.calss_finish_create {
    width: 800px;
}

</style>